<!--通用搜索-->
<template>
  <div class="GeneralSearch">
    <CompositeInput v-for="(item, index) in list" :key="index" :options="item" class="CompositeInput" />
    <span>
      <el-button size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">Search</el-button>
      <el-button v-if="crud.optShow.reset" style="margin-left:5px !important" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">Reset</el-button>
    </span>
  </div>
</template>
<script>
import { generalsearch } from '@crud/crud'
import CompositeInput from '../CompositeInput'
export default {
  components: { CompositeInput },
  mixins: [generalsearch()],
  props: {
    query: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      list: null
    }
  },
  created() {
    this.initQuery()
  },
  methods: {
    initQuery() {
      // 获取栈种类
      const StackArr = [...new Set(this.query.map(item => item.stack))]
      const QueryArr = StackArr.map(stackValue => this.query.filter(item => item.stack === stackValue))
      this.list = QueryArr
    }
  }
}
</script>
<style lang="scss" scoped>
.GeneralSearch {
  .CompositeInput{
    margin-right: 10px;
  }
}
</style>
